<template>
	<view class="post-recommend">
		<view class="search">
			<view class="uni-input">
				<input type="number" v-model="searchPhone" placeholder="输入手机号搜索" />
				<text class="icon iconfont icon-sousuo"></text>
			</view>
			<view class="column">
				<view class="btn" @click="searchUser">
					搜索
				</view>
			</view>
		</view>
		<view class="content">
			<view class="Recommender" v-if="showUserList">
				<view class="box">
					<view class="btnBox" @click="transferAccounts">转账</view>
					<view class="left">
						<image :src="userInfo.avatar"></image>
						<view class="userID">
							(ID:{{ userInfo.uid }})
						</view>
					</view>
					<view class="right">
						<view class="name">
							{{ userInfo.nickname.length > 13 ? userInfo.nickname.substring(0, 13) + "..." : userInfo.nickname }}
						</view>
						<view class="store">
							<text>{{ userInfo.vipName }}</text>
						</view>

						<view class="phone" v-if="userInfo.phone">
							手机号: {{ userInfo.phone }}
						</view>
						<view class="time">
							加入时间: {{ userInfo.createTime }}
						</view>

					</view>
				</view>
			</view>
			<view class="nothData" v-else>
				<image src="https://h5.ylsp.vip/file/static/record-bg.png"></image>
			</view>
		</view>
		<view class="showModal" v-show="showModal" @click="hideModal">
		</view>
		<view class="showModal_view" :class="showModal ? 'showModalAtive' : 'hideModal'">
			<view class="title">
				转账
				<text class="iconfont icon-guanbi" @click="cancel"></text>
			</view>
			<view class="MyIntegral">
				我的积分：{{ MyIntegral }}
			</view>
			<view class="transferAccounts">
				<text class="iconfont icon-ziyuan-xianxing"></text>
				<input type="number" v-model="amount" @input="inputData" placeholder="输入金额"/>
				<text class="tips" v-if="tips">{{ PromptContent }}</text>
			</view>
			<view class="determine">
				<button v-if="dataIsCorrect" type="default" @click="submitForm">确定</button>
				<button v-else type="default" @click="submitForm" disabled>确定</button>
			</view>
		</view>
		<jpPwd ref="jpPwds" @completed="completed" @forget="forget" :msg="msg"></jpPwd>
	</view>
</template>
<script>
	import {
		getUserInfo,
		queryUser4mobile,
		traderPwd
	} from "@/api/user";
	import jpPwd from '@/components/jp-pwd/jp-pwd.vue';
	const NAME = "IntegralTransfer";
	export default {
		data() {
			return {
				userInfo:{},
				MyIntegral: 0,
				MyPhone:'',
				searchPhone: '',
				payPassword:'',
				amount: '', // 转账数额
				tips: false, // 提示开关
				showModal: false, // 转账组件弹出开关
				msg: '', // 输入密码错误提示信息
				PromptContent: '', // 输入积分错误提示信息
				dataIsCorrect: false, // 提交按钮切换开关
				showUserList: false
			}
		},
		components: {
			jpPwd
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME) {



				}
			}
		},
		onShow() {
			this.getUser()
		},
		methods: {
			transferAccounts() {
				this.showModal = true
				this.amount = ''
			},

			hideModal() {
				this.showModal = false
			},

			cancel() {
				this.showModal = false
			},

			inputData() {
				if (this.amount > 0) {
					if (this.amount > this.MyIntegral) {
						this.tips = true
						this.PromptContent = '您的积分余额不足'
						this.dataIsCorrect = false
					} else {
						this.tips = false
						this.dataIsCorrect = true
					}
				} else {
					this.tips = true
					this.dataIsCorrect = false
					this.PromptContent = '输入积分必须大于0'
				}
			},

			submitForm() {
				console.log(this.amount)
				this.showModal = false
				this.$refs.jpPwds.toOpen()
			},

			searchUser() {
				let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				let searchPhone = this.searchPhone;
				console.log(searchPhone)
				if (searchPhone == '' || searchPhone == null) {
					uni.showToast({
						title: "手机号码不能为空",
						icon: "none",
						duration: 2000,
					});
					return
				} else {
					if (!reg_tel.test(searchPhone)) {
						uni.showToast({
							title: "请输入正确的手机号码",
							icon: "none",
							duration: 2000,
						});
						return
					} else {
						if (searchPhone == this.MyPhone) {
							uni.showToast({
								title: "系统不提供自身转账功能",
								icon: "none",
								duration: 2000,
							});
							return
						}
					}
				}
				uni.showLoading({
					title: '加载中'
				});
				console.log("点击搜索方法")
				queryUser4mobile(this.searchPhone).then(
					res => {
						uni.hideLoading();
						this.userInfo = res.data
						this.showUserList = true
						console.log("用户信息：" + this.userInfo)
					},
					err => {
						uni.hideLoading();
						uni.showToast({
							title: err.msg,
							icon: "none",
							duration: 2000,
						});
					}
				);
			},
			completed(e) {
				console.log(e)
				uni.showLoading({
					title: '加载中'
				});
				console.log("交易密码：" + e)
				console.log("用户Id：" + this.userInfo.uid)
				console.log("转账数额：" + this.amount)
				traderPwd(e, this.userInfo.uid, this.amount).then(
					res => {
						uni.hideLoading();
						console.log(res.msg)
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000,
						});
						this.userInfo = {}
						this.showUserList = false
						this.searchPhone = ''
						this.getUser()
						this.$refs.jpPwds.toCancel()
					},
					err => {
						this.msg = '密码错误'
						uni.hideLoading();
						this.$refs.jpPwds.backs()
						uni.showToast({
							title: err.msg,
							icon: "none",
							duration: 2000,
						});
					}
				);
			},
			forget() {
				console.log('忘记密码')
				this.$yrouter.push({
					path: "/pages/user/setupPassword/index",
					query: {
						id: 2,
					},
				});
			},
			getUser() {
				getUserInfo().then(res => {
					console.log(res.data)
					this.MyIntegral = res.data.nowMoney
					this.MyPhone = res.data.phone
					
					if(res.data.wechatAccount == '' || res.data.wechatAccount == null){
						console.log("没有设置支付密码")
						
						uni.showModal({
							title: '提示',
							content: '您的账户还没有设置支付密码，请前往个人中心设置后再操作！',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/setupPassword/index'
									});
								} else if (res.cancel) {
									uni.navigateBack(1)
								}
							}
						});
					}else{
						console.log("已设置支付密码")
					}
				})
				.catch(error => {
					console.log('获取用户信息失败')
					reject('获取用户信息失败')
				})
			}
		}
	}
</script>

<style lang="less">
	.showModal {
		position: fixed;
		top: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 100;
	}

	.showModal_view {
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		height: 550rpx;
		width: 100%;
		z-index: 101;
		overflow: hidden;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.title {
			height: 100rpx;
			width: 100%;
			position: relative;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;

			.iconfont {
				position: absolute;
				right: 50rpx;
				top: 0rpx;
				font-size: 34rpx;
			}
		}

		.MyIntegral {
			height: 100rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			color: #333333;
		}


		.transferAccounts {
			height: 200rpx;
			width: 100%;
			position: relative;
			box-sizing: border-box;
			padding: 0 30rpx;

			.iconfont {
				display: block;
				font-size: 70rpx;
				position: absolute;
				top: 55rpx;
				color: #ff3334;
			}

			.tips {
				display: block;
				font-size: 30rpx;
				position: absolute;
				top: 80rpx;
				right: 40rpx;
				color: #ff3334;
			}

			input {
				height: 110rpx;
				font-size: 60rpx;
				display: block;
				padding-left: 100rpx;
				position: absolute;
				top: 50rpx;
				padding-bottom: 30rpx;
				border-bottom: #e8e8e8 solid 1rpx;
			}
		}


		.determine {
			height: 100rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;

			button {
				height: 80rpx;
				width: 100%;
				background-color: #ff3334;
				border-radius: 80rpx;
				color: #FFFFFF;
				border: none;
				font-size: 30rpx;
			}

			button[disabled] {
				background-color: #fe8f90;
			}
		}
	}


	.post-recommend .showModalAtive {
		transform: translate3d(0rpx, 0rpx, 0rpx);
		transition-duration: 0.5s;
	}

	.post-recommend .hideModal {
		transform: translate3d(0rpx, 550rpx, 0rpx);
		transition-duration: 0.5s;
	}


	.post-recommend {
		height: 100%;
		width: 100%;
	}

	.post-recommend .black {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 3;
	}

	.post-recommend .button-view {
		position: fixed;
		right: 50rpx;
		bottom: 150rpx;
		height: 100rpx;
		width: 100rpx;
		z-index: 5;
	}

	.post-recommend .button-view .tab {
		height: 100rpx;
		width: 100rpx;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		background-color: #fc5531;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
		font-size: 46px;
		position: absolute;
		top: 0;
		right: 0;
		transition: all 0.5s;
		z-index: 6;
	}

	.post-recommend .button-view .tabAdd {
		height: 100rpx;
		width: 100rpx;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		background-color: #fc5531;
		color: #ffffff;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		position: absolute;
		top: 0;
		right: 0;
		transition: all 0.5s;
		z-index: 5;
	}

	.post-recommend .button-view .tabAdd.active {
		top: -100rpx;
		right: 110rpx;
		transition: all 0.5s
	}

	.post-recommend .button-view .tabMy {
		height: 100rpx;
		width: 100rpx;
		-webkit-border-radius: 100%;
		border-radius: 100%;
		background-color: orange;
		color: #ffffff;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		position: absolute;
		top: 0;
		right: 0;
		transition: all 0.5s;
		z-index: 5;
	}

	.post-recommend .button-view .tabMy.active {
		top: 100rpx;
		right: 110rpx;
		transition: all 0.5s
	}

	.materiel-service {
		height: 60rpx;
		width: 200rpx;
		line-height: 60rpx;
		background-color: #fc5531;
		font-size: 26rpx;
		color: #FFFFFF;
		border: none;
	}

	.post-recommend .search {
		background-color: #FFFFFF;
		height: 100rpx;
		width: 100%;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		left: 0;
		z-index: 2;
	}

	.post-recommend .content {
		overflow-y: auto;
		padding: 0 30rpx;
		height: 100%;
		width: 100%;
		padding-top: 120rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;

	}

	.post-recommend .content .nothData {
		width: 100%;
		overflow: hidden;
		padding-top: 100rpx;
	}

	.post-recommend .content .nothData image {
		display: block;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.post-recommend .content .Recommender {
		width: 100%;
		background-color: #FFFFFF;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		border-bottom: #e8e8e8 solid 1rpx;
	}

	.post-recommend .content .Recommender .title {
		font-size: 36rpx;
		color: #fc5531;
		border-bottom: #e8e8e8 solid 1rpx;
		padding: 10rpx 0 20rpx 0;
		margin: 0 30rpx;
	}

	.post-recommend .content .Recommender .box {
		width: 100%;
		height: 230rpx;
		position: relative;
	}

	.post-recommend .content .Recommender .box .btnBox {
		position: absolute;
		top: 80rpx;
		right: 30rpx;
		height: 60rpx;
		width: auto;
		padding: 0 30rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 60rpx;
		background-color: #ff3334;
		border: none;
		z-index: 8;
		border-radius: 30rpx;
	}

	.post-recommend .content .Recommender .box .left {
		width: 30%;
		float: left;
		height: 230rpx;
		padding-top: 20rpx;
		text-align: center;
	}

	.post-recommend .content .Recommender .box .left .userID {
		color: #fc5531;
		font-size: 24rpx;
		text-align: center;
	}

	.post-recommend .content .Recommender .box .left image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.post-recommend .content .Recommender .box .right {
		position: relative;
		width: 70%;
		float: left;
		height: 230rpx;
		padding-top: 20rpx;
		padding-left: 10rpx;
	}

	.post-recommend .content .Recommender .box .right .tel-phone {
		position: absolute;
		right: 70rpx;
		bottom: 58rpx;
		height: 40rpx;
		line-height: 35rpx;
		padding: 0 10rpx;
		border: #39c solid 1rpx;
		border-radius: 6rpx;
		display: inline-block;
	}

	.post-recommend .content .Recommender .box .right .tel-phone view {
		width: 100%;
		height: 100%;
		font-size: 22rpx;
		color: #39c;
	}

	.post-recommend .content .Recommender .box .right .copy-phone {
		position: absolute;
		right: 170rpx;
		bottom: 58rpx;
		height: 40rpx;
		line-height: 35rpx;
		padding: 0 10rpx;
		border: #39c solid 1rpx;
		border-radius: 6rpx;
		display: inline-block;
	}

	.post-recommend .content .Recommender .box .right .copy-phone view {
		width: 100%;
		height: 100%;
		font-size: 22rpx;
		color: #39c;
	}

	.post-recommend .content .Recommender .box .right .copy-phone image {
		width: 100%;
		height: 100%;
	}

	.post-recommend .content .Recommender .box .right .tel-phone image {
		width: 100%;
		height: 100%;
	}

	.post-recommend .content .Recommender .box .right .Recommender-phone {
		bottom: 0rpx;
	}

	.post-recommend .content .Recommender .box .right .R-copy-phone {
		right: 150rpx;
		bottom: 0;
	}

	.post-recommend .content .Recommender .box .right .tel-phone text {
		color: #39c;
	}

	.post-recommend .content .Recommender .box .right .name {
		font-size: 30rpx;
		color: #333;
	}

	.post-recommend .content .Recommender .box .right .store {
		font-size: 30rpx;
		color: #666;
		padding-top: 5rpx;
	}

	.post-recommend .content .Recommender .box .right .store text {
		height: 50rpx;
		padding: 0 20rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		background-color: #fc5531;
		font-size: 26rpx;
		border-radius: 30rpx;
	}

	.post-recommend .content .Recommender .box .right .time {
		font-size: 30rpx;
		color: #666;
		padding-top: 20rpx;
	}

	.post-recommend .content .Recommender .box .right .phone {
		font-size: 30rpx;
		color: #666;
		padding-top: 20rpx;
	}


	.post-recommend .search .uni-input {
		width: 77%;
		float: left;
		position: relative;
		padding: 15rpx 20rpx 0 20rpx;
		box-sizing: border-box;
	}

	.post-recommend .search .uni-input input {
		width: 100%;
		height: 70rpx;
		border-radius: 35rpx;
		background-color: #f7f7f7;
		border: none;
		padding-left: 30rpx;
		font-size: 28rpx;
		color: #000000;
	}

	.post-recommend .search .uni-input .icon {
		position: absolute;
		top: 30rpx;
		right: 45rpx;
		color: #999999;
	}

	.post-recommend .search .column {
		width: 23%;
		float: left;
		box-sizing: border-box;
		padding: 15rpx 15rpx 0 0;
	}

	.post-recommend .search .column .btn {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		border-radius: 35rpx;
		text-align: center;
		color: #ffffff;
		background-color: #fc5531;
		font-size: 26rpx;
	}
</style>
